<template>
  <!-- journalReview -->
  <div>
    <div class="flex-box" style="justify-content: space-between;">
      <div style="width: 49%;">
        <div class="wrap g-card" style="margin-bottom: 20px">
          <div class="title-header">点评率</div>

          <div class="flex-box" style="justify-content: space-around;align-items: center;text-align: center;">
            <div class="eacharts-dom" id="rang"></div>

            <!-- <div class="flex-box"
              style="width: 70%;text-align: center;justify-content: space-around;align-items: center;"> -->
            <div class="left-dis-box">
              <span>8.5%</span>
              <div style="margin-top: 3px;">低点评率</div>
            </div>
            <div class="left-dis-box">
              <span style="color: #FCA21D;">1.5%</span>
              <div style="margin-top: 3px;">缺失率</div>
            </div>
            <div class="left-dis-box">
              <span style="color: #2D49F7;">1.5%</span>
              <div style="margin-top: 3px;">服务偏差率</div>
            </div>
            <!-- </div> -->
          </div>
        </div>
      </div>

      <div style="width: 49%;">
        <div class="wrap g-card" style="padding-bottom: 5px;">
          <div class="title-header">收费情况预估</div>

          <div class="flex-box" style="justify-content: space-around;align-items: center;">
            <div class="eacharts-dom" id="logInput1" style="margin-top: -10px;"></div>

            <div class="flex-box echarts-right">
              <div class="left-dis-box">
                <span style="color: #000;">8.5%</span>
                <div class="flex-box tip-box" style="justify-content: center;">
                  <div class="cir-point" style="background: #0255FF;"></div>
                  <span class="right-span">成功</span>
                </div>
                <!-- <div>低点评率</div> -->
              </div>
              <div class="left-dis-box">
                <span style="color: #000;">1.5%</span>
                <div class="flex-box tip-box" style="justify-content: center;">
                  <div class="cir-point" style="background: #87DDFE;"></div>
                  <span class="right-span">不可回收</span>
                </div>
              </div>
              <div class="left-dis-box">
                <span style="color: #000;">1.5%</span>
                <div class="flex-box tip-box" style="justify-content: center;">
                  <div class="cir-point" style="background: #73DEB3;"></div>
                  <span class="right-span">困难件</span>
                </div>
              </div>
              <div class="left-dis-box">
                <span style="color: #000;">1.5%</span>
                <div class="flex-box tip-box" style="justify-content: center;">
                  <div class="cir-point" style="background: #FDDE69;"></div>
                  <span class="right-span">不确定</span>
                </div>
              </div>
              <div class="left-dis-box">
                <span style="color: #000;">1.5%</span>
                <div class="flex-box tip-box" style="justify-content: center;">
                  <div class="cir-point" style="background: #FF83A4;"></div>
                  <span class="right-span">未联系率</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="flex-box" style="justify-content: space-between;">
      <div style="width: 73%;">
        <div class="wrap g-card" style="margin-bottom: 20px">
          <div class="title-header">日志点评
          </div>

          <el-form :model="queryParams">
            <el-row>
              <el-col :span="8">
                <el-form-item prop="dddd" label="">
                  <Cascader change-on-select :data="organizationList" v-model="queryParams.dddd" style="width: 100%;"
                    placeholder="请选择机构" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="eeee" label="">
                  <el-select v-model="queryParams.eeee" clearable filterable placeholder="续收专员" style="width: 100%;">
                    <el-option v-for="item in reagentCodeListM" :key="item.key" :value="item.key">
                      {{ item.value }}-{{ item.key }}
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="bbbb" label="">
                  <el-date-picker v-model="queryParams.date1" style="width: 100%;"
                    @change="(val) => dateChange(val, { fileBytes: ['acptBgnDate', 'acptEndDate'] }, 'queryParams')"
                    :editable="false" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    start-placeholder="工作日志起期" end-placeholder="工作日志止期" size="small" class="item-width">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item prop="cccc" label="">
                  <el-select v-model="queryParams.cccc" clearable filterable placeholder="工作状态" style="width: 100%;">
                    <el-option v-for="item in ccccList" :key="item.value" :value="item.value" :label="item.label" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="aaaa" label="">
                  <el-select v-model="queryParams.aaaa" clearable filterable placeholder="日志类型" style="width: 100%;">
                    <el-option v-for="item in aaaaList" :key="item.value" :value="item.value" :label="item.label" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="">
                  <div style="display: inline-block;float: right;">
                    <el-button type="primary" @click="search" size="mini">查询
                    </el-button>
                    <el-button type="info" plain @click="resetQuery" size="mini">重置
                    </el-button>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <Card style="margin-top: 20px;">
          <el-table v-loading="loading" :data="tableList" style="width: 100%;">
            <el-table-column label="日志类型" align="center" prop="aaaa" fixed="left" />
            <el-table-column label="汇报日期" align="center" prop="bbbb" width="100" />

            <el-table-column label="机构" align="center" prop="jjjj" width="100" />
            <el-table-column label="续收员" align="center" prop="kkkk" width="100" />

            <el-table-column label="服务完成率" align="center" prop="cccc" width="110" />
            <el-table-column label="预估收费成功件数" align="center" prop="dddd" width="130" />
            <el-table-column label="预估不可回收/困难件数" align="center" prop="eeee" width="170" />
            <el-table-column label="预估不确定件数" align="center" prop="ffff" width="130" />
            <el-table-column label="工作类型" align="center" prop="gggg" width="150" />
            <el-table-column label="更新时间" align="center" prop="hhhh" width="150" />
            <el-table-column label="状态" align="center" prop="iiii" fixed="right" width="100" />
            <el-table-column label="操作" align="center" fixed="right" width="100">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="uploadExcel(scope.row)">撤销</el-button>
                <!-- handleDelete(scope.row) -->
                <el-button size="mini" type="text" @click="dialogVisible = true">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
        </Card>
      </div>
      <div style="width: 25%;">
        <div class="wrap g-card">
          <div class="title-header"><span>日志日历</span>
            <div class="flex-box" style="float: right;font-size: 14px;align-items: center;">
              <div class="flex-box tip-box">
                <div class="no-input-line"></div>
                <span>缺报</span>
              </div>
              <div class="flex-box tip-box" style="margin: 0 15px;">
                <div class="cir-point"></div>
                <span>低星</span>
              </div>
              <div class="flex-box tip-box">
                <div class="cir-point" style="background: #F02828;"></div>
                <span>未读</span>
              </div>
            </div>
          </div>
          <el-calendar class="calender-cla">
            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
            <template slot="dateCell" slot-scope="{date, data}">
              <!--  -->
              <div :class="[data.isSelected ? 'is-selected' : '', 'day-item', noInput(date, data) ? 'bor-no-input' : '']">
                <span>{{ data.day.split('-').slice(1)[1] }}</span>
                <div class="point-box">
                  <div v-if="lowX(date, data)" class="cir-point"></div>
                  <div v-if="noReade(date, data)" class="cir-point" style="background: #F02828;margin-left:5px;">
                  </div>
                </div>
              </div>
            </template>
          </el-calendar>
        </div>
        <!-- </div> -->
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="填写日志" width="35%" append-to-body destroy-on-close
      :close-on-click-modal="false">

      <el-radio-group v-model="form.aaaa">
        <el-radio label="1">日报</el-radio>
        <el-radio label="2">周报</el-radio>
      </el-radio-group>

      <div class="flex-box" style="justify-content: space-between;margin-top:10px;align-items: center;">
        <span v-if="form.aaaa == 1" class="font-blod">2023年1月23日</span>
        <span v-else class="font-blod">2023年1月23日-2023年1月30</span>
        <el-button type="text" @click="">查看工作记录</el-button>
      </div>
      <el-divider class="divider-self"></el-divider>

      <h5 style="margin: 10px 0;">工作核查情况</h5>
      <el-descriptions size="mini" :column="4">
        <el-descriptions-item label="计划次数">400</el-descriptions-item>
        <el-descriptions-item label="实际服务">380</el-descriptions-item>
        <el-descriptions-item label="服务率">95%</el-descriptions-item>
        <el-descriptions-item label="收费件数">10</el-descriptions-item>
        <el-descriptions-item label="服务客户">50</el-descriptions-item>
        <el-descriptions-item label="服务保单">78</el-descriptions-item>
        <el-descriptions-item label="面访次数">80</el-descriptions-item>
        <el-descriptions-item label="电访次数">200</el-descriptions-item>
        <el-descriptions-item label="服务客户">50</el-descriptions-item>
        <el-descriptions-item label="服务保单">78</el-descriptions-item>
        <el-descriptions-item label="面访次数">80</el-descriptions-item>
        <el-descriptions-item label="电访次数">200</el-descriptions-item>
        <el-descriptions-item label="网联次数">100</el-descriptions-item>
        <el-descriptions-item label="跟进记录">30</el-descriptions-item>
        <el-descriptions-item label="商机识别">2</el-descriptions-item>
      </el-descriptions>

      <h5 style="margin: 10px 0;">收费情况预估</h5>
      <el-descriptions size="mini" :column="4">
        <el-descriptions-item label="可回收">400</el-descriptions-item>
        <el-descriptions-item label="困难件">380</el-descriptions-item>
        <el-descriptions-item label="不可回收">95%</el-descriptions-item>
        <el-descriptions-item label="不确定">10</el-descriptions-item>
        <el-descriptions-item label="补充说明">无</el-descriptions-item>
      </el-descriptions>
      <el-divider class="divider-self"></el-divider>

      <h5 style="margin: 10px 0;">宣导计划</h5>
      <el-descriptions size="mini" :column="1">
        <el-descriptions-item label="工作时间">16:03</el-descriptions-item>
        <el-descriptions-item label="工作内容">续收服务宣导</el-descriptions-item>
        <el-descriptions-item label="附件">无</el-descriptions-item>
      </el-descriptions>
      <el-divider class="divider-self"></el-divider>

      <h5 style="margin: 10px 0;">评价</h5>
      <div class="rate-box">
        <div class="flex-box" style="justify-content: space-between;">
          <div class="flex-box" style="color: #B5B5B5;"><span>张主管</span>
            <el-rate v-model="rateVal" style="margin-left: 10px;margin-bottom: 10px;"></el-rate>
          </div>
          <div> <span style="color: #B5B5B5;margin-right: 20px;">2023-01-01 10:00:00</span>
            <i class="el-icon-delete" style="color:#DB3838;"></i>
          </div>
        </div>
        <p>续期服务应该提前，不要总是等到宽末。</p>
      </div>

      <el-input v-model="input2" placeholder="请输入内容" style="margin-top: 20px;">
        <template slot="prepend">
          <el-rate v-model="rateVal"></el-rate>
        </template>
        <template slot="append">
          <el-button type="primary" @click="dialogVisible = false">提交</el-button>
        </template>
      </el-input>
    </el-dialog>
  </div>
</template>
<script>
const echarts = require("echarts");
export default {
  name: 'JournalReview',
  data() {
    return {
      rateVal: 4,
      input2: '',
      total: 3,
      queryParams: {},
      aaaaList: [{ label: '日报', value: '1' }, { label: '周报', value: '2' }],
      ccccList: [{ label: '待点评', value: '1' }, { label: '已点评', value: '2' },],
      organizationList: [],
      tableList: [{
        aaaa: '日报', bbbb: '2023-01-01', cccc: '92.38%',
        dddd: '28件', eeee: '3件', ffff: '1件', jjjj: '无锡分公司', kkkk: '8100001-张元',
        gggg: '服务计划、宣导计划', hhhh: '2023-01-01 10:00:00', iiii: '待点评',
      }, {
        aaaa: '日报', bbbb: '2023-01-01', cccc: '92.38%',
        dddd: '28件', eeee: '3件', ffff: '1件', jjjj: '无锡分公司', kkkk: '8100001-张元',
        gggg: '服务计划、宣导计划', hhhh: '2023-01-01 10:00:00', iiii: '待点评',
      }, {
        aaaa: '日报', bbbb: '2023-01-01', cccc: '92.38%',
        dddd: '28件', eeee: '3件', ffff: '1件', jjjj: '无锡分公司', kkkk: '8100001-张元',
        gggg: '服务计划、宣导计划', hhhh: '2023-01-01 10:00:00', iiii: '待点评',
      }, {
        aaaa: '日报', bbbb: '2023-01-01', cccc: '92.38%',
        dddd: '28件', eeee: '3件', ffff: '1件', jjjj: '无锡分公司', kkkk: '8100001-张元',
        gggg: '服务计划、宣导计划', hhhh: '2023-01-01 10:00:00', iiii: '待点评',
      },],
      form: {
        aaaa: '1',
        workList: [],
      },
      loading: false,
      dialogVisible: false,
      myChart: null,
      rangChart: null,
      option: {
        // title: {
        //   text: 'Referer of a Website',
        //   subtext: 'Fake Data',
        //   left: 'center'
        // },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left'
        // },
        tooltip: {
          trigger: 'item',
          show: false,
          textStyle: {
            fontSize: 8
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            // height: 170,
            // top: -30,
            // left: '20',
            right: 0,
            radius: '90%',
            label: {
              show: false,
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      optionRang: {
        color: ["#F8F8F8", "#2C50F8"],
        tooltip: {
          show: false,
        },
        series: [
          {
            type: "pie",
            radius: ["75%", "90%"],
            // height: 170,
            // top: -30,
            right: 0,
            // avoidLabelOverlap: true,
            label: {
              show: true,
              fontSize: 16,
              // fontWeight: "bold",
              position: "center",
              formatter: "75%", // 48%\n当月达成率
            },
            data: [{ value: 0.25 }, { value: 0.75 }],
          },
        ],
      },
    }
  },
  mounted() {
    this.getAllOrganization()
    let chartDom = document.getElementById('logInput1');
    let rang = document.getElementById('rang');
    this.myChart = echarts.init(chartDom);
    this.rangChart = echarts.init(rang);
    // this.optionRang.series[0].label.formatter = '75%';
    setTimeout(() => {
      this.rangChart.setOption(this.optionRang);
      this.myChart.setOption(this.option);
      this.myChart.resize()
    }, 50);
  },
  methods: {
    search() { },
    resetQuery() { },
    getList() { },
    handleDelete() { },
    lowX(date, data) {
      return ['07', '11'].includes(data.day.split('-').slice(1)[1])
    },
    noReade(date, data) {
      return ['07', '14'].includes(data.day.split('-').slice(1)[1])
    },
    noInput(date, data) {
      return ['14'].includes(data.day.split('-').slice(1)[1])
    },
    // 获取续期专员机构下拉框信息
    getAllOrganization() {
      // this.api.selectUerList().then(res => {
      //   if (res.code == 200 && res.data != null) {
      //     this.organizationList = res.data[0].listKeyValueVOS;
      //   } else {
      //     this.organizationList = [];
      //   }
      // });
      this.api.remanagecomList().then(res => {
        if (res.code == 200 && res.data != null) {
          let arr = []
          arr.push(res.data)
          arr.forEach(one => {
            one.value = one.comcode
            one.label = one.comcode + '-' + one.name
            one.children = one.chilDren || []
            if (one.children) {
              one.chilDren.forEach(two => {
                two.value = two.comcode
                two.label = two.comcode + '-' + two.name
                two.children = two.chilDren || []
                if (two.children) {
                  two.children.forEach(three => {
                    three.value = three.comcode
                    three.label = three.comcode + '-' + three.name
                    three.children = three.chilDren || []
                    if (three.children) {
                      three.children.forEach(four => {
                        four.value = four.comcode
                        four.label = four.comcode + '-' + four.name
                        four.children = four.chilDren || []
                      })
                    }
                  })
                }
              })
            }
          })
          console.log(arr);
          this.organizationList = arr
        } else {
          this.organizationList = [];
        }
      });
    },
    // range 日期change事件
    dateChange(val, item, str) {
      val = val || ["", ""];
      item.fileBytes.forEach((fileByte, index) =>
        this.$set(this[str], fileByte, val[index])
      );
    },
  }
}
</script>

<style lang="less" scoped>
.rate-box {
  padding: 12px 15px;
  border: 1px solid #EEEEEE;
  font-size: 12px;
}

.divider-self {
  margin: 0 !important;
}

.eacharts-dom {
  width: 90px;
  height: 90px;
}

.tip-box {
  align-items: center;

  div {
    margin-right: 5px;
  }

  span {
    font-weight: 400;
    color: #1D1D1D;
    font-size: 12px;
  }
}

.no-input-line {
  width: 19px;
  height: 3px;
  background: #FCA21D;
  border-radius: 2px;
}

.cir-point {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #FCA21D;
  border-radius: 100%;
}

.calender-cla {
  /deep/ .el-calendar-day {
    text-align: center;
    height: 40px;
    line-height: 40px;
    padding: 0;
    margin-top: 3px;
  }

  .bor-no-input {
    border-top: 3px solid #FCA21D !important;
  }

  .day-item {
    position: relative;
    width: 85%;
    height: 100%;
    border-top: 3px solid #E6E6E6;
    border-radius: 3px;
    margin: 0 auto;

    .point-box {
      position: absolute;
      top: 24%;
      width: 100%;
      text-align: center;
    }
  }

  .is-selected {
    color: #082AFF;
    background: #ECF2FE;
    border-top: 3px solid #082AFF !important;
  }


  /deep/ .el-calendar-table tr td:first-child {
    border: none;
  }

  /deep/ .el-calendar-table td {
    border: none;
  }

}

.flex-box {
  display: flex;
  // justify-content: space-between;
}

.left-dis-box {
  position: relative;
  // width: 124px;
  width: 23%;
  padding: 3px 0;
  background: #FBFBFB;
  border-radius: 4px;
  color: #989898;
  font-size: 14px;

  span {
    font-weight: 600;
    color: #EB2727;
    font-size: 16px;
  }

  .right-span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #989898;
  }
}

.echarts-right {
  width: 75%;
  text-align: center;
  // justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  margin-top: -15px;

  .left-dis-box {
    margin-top: 9px;
    width: 30%;
  }
}

.echarts-right div:nth-child(3n - 1) {
  margin-left: 5%;
  margin-right: 5%;
}

.ma-top {
  margin-top: 20px;
}
</style>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}
</style>